<template>
	<div class="box" style="width: 100%;height: 500px;float: left;margin: 10px 0;">
		<div class="d1" style="margin-left: 0;width: 100%;height: 500px;">
			<el-card class="box-card" style='border-top: 3px solid deepskyblue;'>
				<div slot="header" class="clearfix">
					<i class="el-icon-time"></i>
					<span>学生动态统计（每月）<i class="el-icon-refresh" @click="searchauto()"></i></span>
				<router-link to="/cost/cwtj">
							<el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
						</router-link>
				</div>
				<div id="main1" style="width: 100%;height: 400px;margin: 0 auto;"></div>
			</el-card>

		</div>
	</div>
</template>
<script type="text/javascript">
	//	import Homeysbjlist from '../../view/admin/yushebjManage/add'
	import echarts from 'echarts'
	import qs from 'qs'
	export default {
		//		components: { Homeysbjlist },
		data() {
			return {
				zxxs:'',
				xzxs:'',
				lsxs:'',
				lstrq: [],
				listdata1: []
			}
		},
		created() {
			this.isLoading = true; //动画开始
			this.lstrq = [];
			var d = new Date();
			for(var i = -30; i <=0  ; i++) {
				var str = this.addDate(d, i  )
				this.lstrq.push(str);
			}
			this.searchauto();
		},
		methods: {
			getFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			getFormatDate2(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			searchauto() {
				var d = new Date();
				var etime = this.getFormatDate(d);
				d.setDate(d.getDate() - 30); 
				var btime = this.getFormatDate(d);
				this.search(btime, etime);
			}, 
			search(vbtime, vetime) {
				//查询搜索触发事件 
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params3 = qs.stringify({
					btime: vbtime,
					etime: vetime,
					lx1: '',
					lx2: '',
					lx3: '',
					lx4: '',
					lx5: 'zxxs',
					lx6: 'xzxs',
					lx7: 'lsxs',
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.axios.post(this.$store.state.api + 'tj/listtj', params3)
					.then(res => {
						let data = res.data;
						this.listdata1 = data.data;
						this.searchLoading = false;
						console.log(this.listdata1, 'aaaaaaaaaaa')

						this.$nextTick(function() {
							this.drawPie2('main1')
						});

					}).catch(res => {
						this.searchLoading = false;
					})
			},
			addDate(date, days) {
				var d = new Date(date);
				d.setDate(d.getDate() + days); 
				return  this.getFormatDate2(d);
			},
			drawPie2(id, lststr) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					title: {
						text: '学生统计折线图'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['在校学生', '新增学生','流失学生']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.lstrq
					},
					yAxis: {
						type: 'value'
					},
					series: this.listdata1
					//			    [{
					//          name:'课消次数',
					//          type:'line',
					//          stack: '总量',
					//          data:[120, 132, 101, 134, 90, 230, 210]
					//      },
					//      {
					//          name:'课消金额',
					//          type:'line',
					//          stack: '总量',
					//          data:[220, 182, 191, 234, 290, 330, 310]
					//      } ]
					//this.listdata
				})
			},

		}
	}
</script>
<style lang="less" scoped>
	.text {
		font-size: 14px;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}
	
	.clearfix:after {
		clear: both
	}
	
	.box-card {
		width: 100%;
		height: 100%;
	}
	
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		/*    line-height: 280px;*/
		margin: 0;
		text-align: center;
	}
	
	.el-carousel__item:nth-child(2n) {
		background-color: white;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: lightyellow;
	}
	
	.class-page {
		margin-top: 5px;
	}
</style>